<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品分类管理</title>
    <link rel="stylesheet" href="/elementui/index.css">
    <style>
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="app">

    <!--添加下级弹框-->
    <el-dialog :visible.sync="dialogFormVisible">
        <div align="center" style="position: relative;top: 50px">
            <div align="center" style="width: 300px;position: relative;top: 8px">
                <el-form ref="form" :model="form" label-width="80px">

                    <el-form-item label="分类id：" :hidden="true">
                        <el-dropdown-menu slot="dropdown">
                            <el-input :value="currid"></el-input>
                        </el-dropdown-menu>
                    </el-form-item>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <label class="layui-form-label">分类编号：</label>
                            <select name="cat" lay-verify="required">
                                <option :value="cat.pid" v-for="cat in categorieslist">{{cat.pid}}</option>
                            </select>
                        </div>
                    </div>
                    <el-form-item label="分类名称：">
                        <el-input v-model="pname" placeholder="请输入分类名称"></el-input>
                    </el-form-item>
                    <el-form-item label="剩余数量">
                        <el-input v-model="number" placeholder="请输入剩余数量"></el-input>
                    </el-form-item>


                    <el-form-item label="分类介绍：">
                        <el-input type="textarea" :rows="5" placeholder="请输入内容"
                                  v-model="ptextarea"  maxlength="100"  show-word-limit>
                        </el-input>
                    </el-form-item>


                </el-form>
            </div>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveCategories">确 定</el-button>
        </div>
    </el-dialog>



    <!--电池附件信息表单-->
    <div style="float: left">
        <div style="height: 50px;width: 150px;background-color:#3eaaff">
            <h4 align="center" style="position: relative;top: 8px">现有分类列表</h4>
        </div>
        <div style="border: 1px solid black;width: 150px">
            <el-tree
                    :data="products"
                    :props="defaultProps"
                    default-expand-all
                    ref="tree"
                    @current-change="changeCurrent">
            </el-tree>
        </div>
    </div>
    <div style="float: left">
        <div style="height: 50px;width:1000px;background-color:rgba(107,252,220,0.17)">
            <h4 align="center" style="position: relative;top: 8px">电子附件信息</h4>
        </div>
        <div align="center" style="position: relative;top: 50px">
            <el-button type="warning" icon="el-icon-check" v-on:click="addNewsubclassify">新增下级分类</el-button>
            <el-button type="danger" icon="el-icon-delete" v-on:click="deletesubclassify">删除该分类</el-button>
            <div align="center" style="width: 400px;position: relative;top: 8px">
                <el-form ref="form" :model="form" label-width="120px">
                    <el-form-item label="分类编号：">
                        <el-input v-model="form.id" placeholder="请输入分类编号"></el-input>
                    </el-form-item>
                    <el-form-item label="分类名称：">
                        <el-input v-model="form.name"  placeholder="请输入分类名称"></el-input>
                    </el-form-item>
                    <el-form-item label="分类介绍：">
                        <el-input type="textarea" :rows="5" placeholder="请输入内容"
                                  v-model="form.mintroduction"  maxlength="100"  show-word-limit>
                        </el-input>
                    </el-form-item>
                    <el-button type="primary">保存并应用</el-button>
                    <el-button type="primary">取消</el-button>
                </el-form>
            </div>
        </div>
    </div>

</div>
<script src="/vue/vue.js"></script>
<script src="/elementui/index.js"></script>
<script src="/axios/axios.min.js"></script>
<script src="/qs/qs.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                dialogFormVisible: false,
                currid:0,     //当前树节点id
                cate:'',
                cat:'',
                number:'',
                form:{},
                id:'', name:'', add:'', textarea: '',
                pid:'', pname:'', padd:'', ptextarea: '',
                categorieslist:'',
                products:[{

                }],
                defaultProps:{  //修改树属性的名称
                    children:'subProducts',
                    label:'name',
                }
            };
        },
        methods: {
            //打开添加分类的弹框
            addNewsubclassify(){
                if (this.curr != 0){
                    this.dialogFormVisible = true;
                }else {
                   this.$message("当前在三级菜单，请选择一级或二级菜单")
                }
            },
            //删除该分类
            deletesubclassify(row){
                this.changeCurrent(row,arg);
                this.row = row;

            },
            //保存表单
            saveCategories(){
                axios.get("/categories",this.form).then(value => {
                    if (value.data.state == 1){
                        //重新加载分类列表
                        this.loadCategories();
                    }
                })
                //关闭弹框
                this.dialogFormVisible = false;
            },
            //点击每一行的树节点
            changeCurrent(row,arg){
                console.log(row)
                this.form = row
                /*axios.get("/categorie/id/"+row.id).then(value => {
                    console.log(value.data);
                    this.form = value.data
                    console.log(this.form);
                    axios.get("/categorie/user/"+row.userId).then(value1 => {
                       console.log(value1.data);

                    });
                });*/
            },

            //加载分类树
            loadCategories(){
                axios.get("/categories/name").then(value => {
                    if (value.data.state ==1){
                        this.products = value.data.data;
                        console.log(this.products)
                    }
                })
                axios.get("/categorieslist").then(value => {
                    if (value.data.state == 1){
                        this.categorieslist = value.data.data;
                        console.log(this.categorieslist);
                    }
                })
            }
        },
        mounted(){
            //挂载分类列表
            this.loadCategories();
        }
    });
</script>
</body>
</html>